.list-item-wrap {
  position: relative;
  margin: 0 0 30px 0;
  background: $gradient;
  height: 220px;
  cursor: pointer;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;

  lost-column: 1/3;

  @include transition(box-shadow);
  @include media(3) { lost-column: 1; }

  &:hover {
    //box-shadow: 0 0 2px 2px $main2;
  }

  &:active {
    //box-shadow: 0 0 2px 2px $main1;
  }
}

.list-item-teaser-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 100% 25%;

  opacity: .2;

  transition: opacity 1s ease 0s;

  .active & {
    opacity: .2;
  }
}

.list-item-title {
  color: #fff;
  font-size: 30px;
  float: left;
  position: relative;
  z-index: 10;
}

.list-item-amount {
  float: left;
  clear: both;
  font-size: 16px;
  opacity: .7;
  color: #fff;
}
